<template>
	<div>
		<Header />
		<div>
			<div style="position: relative;">
				<img style="width: 100%;height: auto;" src="@/assets/images/industryNews16.jpg">
				<div style="position: absolute;bottom: 5px;left: 0;background-color: rgba(0, 0, 0, 0.2);width: 100%;">
					<div class="indexContainer mobileFontSize12"
						style="display: flex;align-items: center;font-size: 16px;color: #fff;padding: 10px 0;">
						<img style="width: 12px; height: 15px" src="@/assets/images/industryNews30.png" />
						<span style="padding-left:5px;">当前位置：</span>
						<span>首页</span>
						<span style="padding: 0 5px;">></span>
						<span>方案推广</span>
						<span style="padding: 0 5px;">></span>
						<span>{{menuIndex==0?'行业方案':menuIndex==1?'机构方案':menuIndex==2?'专家文章':'方案征集'}}</span>
						<span style="padding: 0 5px;">></span>
						<span>{{menuIndex==0?'方案':menuIndex==1?'方案':menuIndex==2?'文章':'征集'}}详情</span>
					</div>
				</div>
			</div>

			<div class="indexContainer">
				<div style="padding: 50px 0;flex-direction: column;">
					<div style="padding: 30px;background-color: #f4f4f4;" class="mobilePadding">
						<div style="background-color: #fff;padding: 50px 0;" class="mobilePadding">

							<el-row>
								<el-col :xs="24" :sm="24" :md="{span:20, offset: 2}" :lg="{span:20, offset: 2}"
									:xl="{span:20, offset: 2}">
									<div style="text-align: center;">
										<h2 style="color: #333;font-size: 28px;">{{info.headline}}</h2>
									</div>

									<div style="text-align: center;font-size: 16px;margin-top: 30px;">
										{{info.applicableTargets}}
									</div>

									<div style="text-align: center;font-size: 16px;margin-top: 30px;"
										class="mobileFontSize14">
										<span style="color: #333;">发布人：{{info.publisherw}}</span>
										<span style="color: #333;margin-left: 15px;">发布时间：{{info.createTime}}</span>
										<img style="width: 20px;height: 13px;margin-left: 15px;"
											src="@/assets/images/industryNews24.png">
										<span style="color: #aaa;margin-left: 3px;">{{info.pageView}}</span>
									</div>

									<div style="border-top: 1px dashed #ccc;border-bottom: 1px dashed #ccc;padding: 20px 0;margin:20px 0;display: flex;flex-direction: column;"
										class="mobilePadding">

										<el-row>
											<el-col :xs="24" :sm="24" :md="{span: 16, offset: 4}"
												:lg="{span: 16, offset: 4}" :xl="{span: 16, offset: 4}">
												<div style="background-color: #f1f1f1;padding: 30px 0;">
													<el-row>
														<el-col :span="20" :offset="4">
															<span v-if="info.collectionTimeStart&&info.collectionTimeStart.length > 10"
																style="font-size: 16px;color: #333333;">有效期起止：{{info.collectionTimeStart.slice(0,10)}}~{{info.collectionTimeEnd.slice(0,10)}}</span>
														</el-col>
													</el-row>
													<el-row style="margin-top: 20px;">
														<el-col :span="10" :offset="4">
															<span style="font-size: 16px;color: #333333;">联系人：<span
																	style="font-size: 16px;color: #666666;">{{info.contactRen}}</span></span>

														</el-col>
														<el-col :span="10">
															<span style="font-size: 16px;color: #333333;">联系电话：<span
																	style="font-size: 16px;color: #666666;">{{info.contactPhone}}</span></span>
														</el-col>
													</el-row>

													<div
														style="display: flex;align-items: center;justify-content: center;margin-top: 15px;">
														<img v-if="isApply==false" style="width: 104px;height: 32px;"
															src="@/assets/images/industryNews26.png">
														<img v-else style="width: 104px;height: 32px;" src="@/assets/images/industryNews27.png" >
													</div>
												</div>
											</el-col>
										</el-row>

										<div style="margin-top: 15px;">
											<span
												style="font-size: 22px;border-bottom: 3px solid #266af2;color: #333;font-weight: 600;">征集描述</span>
										</div>

										<div style="margin-top: 15px;">
											<span
												style="font-size: 20px;color: #333;line-height: 35px;">{{info.settleMatter}}</span>
										</div>

										<div style="margin-top: 30px;">
											<span
												style="font-size: 22px;border-bottom: 3px solid #266af2;color: #333;font-weight: 600;">征集要求</span>
										</div>

										<div style="margin-top: 15px;">
											<span
												style="font-size: 20px;color: #333;line-height: 35px;">{{info.expectedEffect}}</span>
										</div>

										<div v-if="info.accessoryDtos&&info.accessoryDtos.length!=0"
											style="margin-top: 30px;">
											<span
												style="font-size: 22px;border-bottom: 3px solid #266af2;color: #333;font-weight: 600;">
												附件</span>
											<div v-for="(item,index) in info.accessoryDtos"
												style="font-size: 20px;text-decoration: underline;color: #409eff;cursor: pointer;margin-top: 15px;"
												@click="handleFile(index)">
												{{item.accessoryName}}
											</div>
										</div>

										<div v-if="contributeList.length" style="margin-top: 30px;">
											<span
												style="font-size: 22px;border-bottom: 3px solid #266af2;color: #333;font-weight: 600;">
												投稿人</span><span style="font-size: 22px;color: #333;font-weight: 600;">（{{contributeList.length}}）</span>
											<div style="display: flex;flex-wrap: wrap;">
												<div v-for="(item,index) in contributeList"
													style="font-size: 20px;color: #333;margin: 15px 15px 15px 0;display: flex;align-items: center;">
													<img style="width: 19px; height: 19px"
														src="@/assets/images/industryNews8.png" />
													<span
														style="margin-left: 3px;">{{item.relationRen}}</span>
												</div>
											</div>
										</div>
									</div>

									<div style="display: flex;justify-content: flex-end;padding-top: 15px;">
										<img v-if="isApply==false" style="width: 138px;height: 44px;cursor: pointer;"
											src="@/assets/images/industryNews47.png" @click="apply2()">
										<img v-else style="width: 138px;height: 44px;cursor: pointer;"
											src="@/assets/images/industryNews28.png" @click="apply()">
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
				</div>
			</div>
		</div>

		<Footer />
		<contributeDialog ref="contributeDialog" @reloadData="getDetail()"></contributeDialog>
	</div>
</template>
<script>
	import Header from "@/components/home/header/header";
	import Footer from "@/components/home/footer/footer";
	import contributeDialog from "@/view/personalCenter/myPlanPromotion/dialogContribute"; //方案投稿
	import {
		planCollectListDetail,
		contributerList,
		getKey
	} from "@/request/api/planPromotion";
	export default {
		components: {
			Header,
			Footer,
			contributeDialog
		},
		data() {
			return {
				info: {},
				contributeList: [] ,//投稿人
				isApply:false,
				userInfo:{}
			}
		},
		created() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
			  this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
			  // console.log('this.userInfo',this.userInfo)
			}
			this.menuIndex = this.$route.query.menuIndex
			this.getDetail()
		},
		mounted() {
			//console.log('mounted')
		},
		methods: {
			getDetail() {
				planCollectListDetail(this.$route.query.id).then((res) => {
					// console.log('res',res)
					if (res.data.code == 200) {
						this.info = res.data.result
						document.querySelector('meta[name="keywords"]').setAttribute('content', res.data.result.keywordes)
						document.querySelector('meta[name="description"]').setAttribute('content', res.data.result.settleMatter)
						document.title = res.data.result.headline

						getKey('applicable_industry').then(res => {
							if (res.data.code === 200) {
								let list = res.data.result.items
								
								let now = new Date().getTime()
								let start = new Date(this.info.collectionTimeStart).getTime()
								let end = new Date(this.info.collectionTimeEnd).getTime()
								if(start < now && now < end){
									this.isApply = true
								}
								
								list.map((item2) => {
									if (this.info.applicableTargets && this.info
										.applicableTargets == item2.value) {
										this.info.applicableTargets = item2.label
									}
								})
							}
						})

						this.getContributerList()
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 投稿人
			getContributerList() {
				contributerList({
					schemeId: this.$route.query.id
				}).then((res) => {
					// console.log('res',res)
					if (res.data.code == 200) {
						let list = res.data.result.qita
						this.contributeList = list
					} else {}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 我要投稿
			apply() {
				if (window.sessionStorage.getItem("userInfo") === null) {
					this.$message({
						message: '请先登录',
						type: "warning",
					});
					return
				}
				if (this.userInfo.iuiCertification == 0) {
					this.$message({
						message: '请先实名认证',
						type: "warning",
					});
					return
				}
				this.$refs.contributeDialog.open('add', {
					cateId: this.info.id
				})
			},
			apply2(){
				this.$message({
					message: '未开始或已过期',
					type: "warning",
				});
			},
			// 点击附件
			handleFile(index) {
				let accessoryUrl = this.info.accessoryDtos[index].accessoryUrl
				window.open(accessoryUrl, '_blank')
			}
		}
	}
</script>
<style lang="less" scoped>
	.form-label {
		text-align: right;
	}

	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobilePadding {
			padding: 10px !important;
		}

		.mobileMargin {
			margin: 10px !important;
		}

		.mobileFontSize14 {
			font-size: 14px !important;
		}

		.mobileFontSize12 {
			font-size: 12px !important;
		}
	}
</style>